.app-home {
  overflow-y: scroll;
  .swiper {
    width: 100%;
    height: 200px;
  }

  .swiper-slide {
    text-align: center;
    font-size: 18px;
    background: #fff;

    /* Center slide text vertically */
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
  }

  .swiper-slide img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  .cont {
    width: 100%;
    padding: 10px 10px 0;
    color: white;
    div {
      height: 120px;
    }
    div {
      p {
        background-color: #54afda;
        padding: 10px;
        border-radius: 15px;
        box-sizing: border-box;
        img {
          transform: scale(0.5);
        }
      }
    }
    .style1 {
      color: #004e73;
      height: 150px;
      margin-bottom: 15px;
      font-weight: bold;
      p {
        position: relative;
      }
      p:first-child {
        flex: 1.5;
        overflow: hidden;
        img {
          position: absolute;
          left: -65px;
          top: -8px;
          opacity: 0.6;
        }
        .rank{
          position: absolute;
          right: 10px;
          bottom: 10px;
          font-size: 80px;
          color: white;
        }
      }
      p:last-child {
        flex: 2;
        margin-left: 10px;
        background-color: rgba(159, 217, 248);
        img {
          position: absolute;
          left: -40px;
          top: -8px;
        }
        button {
          position: absolute;
          right: 10px;
          bottom: 20px;
          border-radius: 15px;
          border: 2px solid #07567b;
          z-index: 2;
          background: none;
          padding: 5px 10px;
          font-size: 14px;
          color: #004e73;
          font-weight: bold;
        }
      }
    }
    .style2 {
      margin-bottom: 15px;
      color: #004e73;
      p {
        flex: 1;
        height: 120px;
      }
      p:first-child {
        background: url("../imgs/index-card-data.png") center no-repeat;
        background-size: cover;
        margin-right: 10px;
        span {
          color: white;
        }
      }
      p:last-child {
        padding-top: 20px;
        background-color: #9dbde3;
        position: relative;
        z-index: -2;
        overflow: hidden;
        img {
          position: absolute;
          right: 15px;
          bottom: -60px;
          z-index: -1;
        }
        span {
          font-weight: bold;
        }
        .total {
          position: absolute;
          right: 10px;
          bottom: 5px;
          span {
            font-size: 60px;
          }
        }
      }
    }
    .style3 {
      margin-bottom: 15px;
      background: url("../imgs/course-img04.jpg") top no-repeat;
      background-size: cover;
      padding: 10px;
      border-radius: 15px;
      font-weight: bold;
    }
  }
}
